<!--
 * @Author: tushan
 * @Date: 2022-12-06 20:46:49
 * @LastEditors: tushan
 * @LastEditTime: 2022-12-14 20:13:55
 * @Description:
-->
<template>
  <div>
    <Transition name="groupBox">
      <GroupItem v-if="show" :data="data" :reload="closeThis"></GroupItem>
    </Transition>
  </div>
</template>
<script setup>
import { onUnmounted, ref } from "vue";
import emitter from "../../util/emitter";
import store from "../../util/store";
import GroupItem from "./GroupItem.vue";
const show = ref(false);
const data = ref();
const add = (dt) => {
  data.value = dt;
  show.value = true;
};

const closeThis = () => {
  show.value = false;
};

emitter.on("addGroupBox", add);
onUnmounted(() => {
  emitter.off("addGroupBox", add);
});
</script>
<style lang="less">
.groupBox-enter-active,
.groupBox-leave-active {
  transition: opacity 0.5s ease;
}

.groupBox-enter-from,
.groupBox-leave-to {
  opacity: 0;
}
</style>
